<template>
<div>
  <span>  state {{state.count}}</span>
  <span> num {{state.num}}</span>
  <br/>
  <button @click="increment"> increment </button>
  <router-view/>
</div>
</template>

<script>
import { onMounted, defineComponent, getCurrentInstance, reactive } from 'vue'
import { useStore } from 'vuex'
export default defineComponent({
  setup () {
    // 可以在组件用通过 getCurrentInstance() 来获取全局globalProperties 中配置的信息, getCurrentInstance 方法获取当前组件的实例，然后通过 ctx 属性获得当前上下文，这样我们就能在setup中使用router和vuex, 通过这个属性我们就可以操作变量、全局属性、组件属性等等
    const demo = getCurrentInstance()
    console.log(demo)

    const store = useStore()
    const state = store.state
    // state
    function increment () {
      store.commit('increment')
      store.commit('MUTaddNum', { num: 88 })
      // mutations
      // store.commit("MUTaddNum",{num:1});
      // store.commit({type:"MUTaddNum",num:1});

      // actions
      // store.dispatch("ACTaddnum",{num:10});
      // store.dispatch({type:"ACTaddnum",num:10});

      // getters
      // num.value= store.getters.GETaddnum;
      console.log(state.count)
    }
    onMounted(() => {
      increment()
    })
    return {
      state: reactive(state),
      increment
    }
  }
})
</script>

<style>
.ml-10 {
  margin-left:  10px;
}
</style>
